<template>
  <div>
      <h3>这是home组件</h3>
      <button @click="originLink">原始路由跳转</button>
      <button @click="quaryLink">quary路由跳转</button>
      <button @click="paramsLink">param路由跳转</button>
  </div>
</template>

<script>
  export default {
      data(){
         return {
          
         }
      },
      methods:{
/** 跳转的选择方案：
 * 1. name + params + 动态参数
 * 2. name + quary
 * 3. path + quary
 * 4. 原始方式 + 动态参数（优先选择）  这种方式如果没有动态参数，作为参数传的数据就会被当成路径的一部分而匹配不到
 */
         originLink(){
            // 手写完整的带有参数的路径来传参跳转，路由规则中必须添加动态参数。 通过 this.$route.params.动态参数 来获取参数
            // this.$router.push({ path: `/router/1234/张三` })  //this.$router.push(`/filters/${this.num}`)
            this.$router.push(`/router/1234/张三`)  //this.$router.push(`/filters/${this.num}`)

            // this.$router.replace("/router")    //无法进行返回上一个页面
            // this.$router.forward()
            // this.$router.back()
            // this.$router.go(0)
         },
         quaryLink(){
            // 路径和参数：/router?userId=123
            this.$router.push({path: "/router", query: { userId: 123, userName: '张三' }})   //路由规则那边不能添加动态参数

            this.$router.push({name: "/router", query: { userId: 123, userName: '张三' }}) //可以添加动态参数，不过这种方式地址栏当中没有路由路径
         },
         paramsLink(){     
            // this.$router.push({path: "router", params: { userId: 123 }})      //params无法和 path 一起使用

            this.$router.push({name: "router", params: { userId: 123, userName: '张三' }})
         }

         
         /** quary 和 params 两种路由传参方式的不同：
          *  1. 地址栏不同：quary是以键值对的形式表示 传递的参数和值。 params是只显示参数的值（直接手写完整路径也一样）
          *  2. 路由规则的path不同：quary不能在path中添加动态参数(否则不能跳转)，params传参跳转需要添加动态参数(否则地址栏没有参数)
          *  3. name和path搭配不同：quary两种搭配都可以。   params无法和 path 一起使用(否则不能添加动态参数，地址栏也就没有参数了)
          */
      }
  }
</script>
<style lang='less' scoped>

</style>
